<template>
	<view class="main">
		<u-navbar :is-back="true" title="新建活动" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="type">
			<view class="tit">
				活动名称
			</view>
			<input type="text" placeholder="请输入活动名称" v-model="name" />
		</view>
		<view class="type">
			<view class="tit">
				门槛
			</view>

			<input type="number" placeholder="请输入使用门槛" v-model="threshold" />
		</view>
		<view class="type">
			<view class="tit">
				减免金额
			</view>
			<input type="number" placeholder="请输入减免金额" v-model="amount" />
		</view>
		<view class="type">
			<view class="tit">
				活动时间
			</view>
			<view class="alltime">
				<view class="times" @click="block(1)">
					<text>{{startdate==''?'开始时间':startdate}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<text>至</text>
				<view class="times" @click="block(2)">
					<text>{{enddate==''?'结束时间':enddate}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="type">
			<view class="tit">
				适用商品
			</view>
			<view class="selects" @click="block(3)">
				<text>{{shopname==''?'请选择商品':shopname}}</text>
				<u-icon name="arrow-right"></u-icon>

			</view>
		</view>
		<view class="confirm" @click="push">
			发布活动
		</view>
		<u-calendar v-model="show" :mode="mode" @change="change" :min-date="mindate"  max-date="3000-12-31"></u-calendar>
		<u-popup v-model="show2" mode="bottom" border-radius="25" height="750">
			<view class="shop" v-for="(item,index) in shoplist" :key="index" @click="selectshop(item.id,item.name)">
				<image :src="item.image" mode=""></image>
				<view class="shop_r">
					<view class="shop_tit">
						{{item.name}}
					</view>
					<view class="status">
						{{item.on_sale==1?'在售中':'已下架'}}
					</view>
					<view class="money">
						¥{{item.minPrice}}-{{item.maxPrice}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				indes: '',
				name: '',
				threshold: '',
				amount: '',
				mode: 'date',
				show: false,
				show2: false,
				startdate: '',
				enddate: '',
				shoplist: [],
				shopname: '',
				shopid: '',
				mindate: ''


			}
		},
		onLoad() {
			this.selectshoplist()
			// min-date
		
			this.mindate=this.dateFormat(new Date())
		},
		mounted() {

		},
		onShow() {},
		methods: {
			dateFormat(time) {
							let date = new Date(time);
							let year = date.getFullYear();
							// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
							let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
							let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
							let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
							let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
							let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
							// 拼接
							return year + "-" + month + "-" + day ;
						
						},
		
			//显示组件
			block(index) {
				if (index == 1 || index == 2) {
					this.show = true,
						this.indes = index
				}
				if (index == 3) {
					this.show2 = true
				}
			},
			//选择的两个时间段
			change(e) {
				if (this.indes == 1) {
					this.startdate = e.result

				} else if (this.indes == 2) {
					this.enddate = e.result
				}
			},
			//查询商品列表
			selectshoplist() {
				global.$http.request({
					url: '/shopapi/goods/goodList',
					data: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.shoplist = res.data.data
					}
				})
			},
			//x选择其中一个商品
			selectshop(id, name) {
				console.log(id);
				console.log(name);
				this.shopid = id
				this.shopname = name
				this.show2 = false
			},
			//发布活动
			push() {
				var start = new Date(this.startdate).getTime()
				var end = new Date(this.enddate).getTime()

				console.log();
				if (this.name == '' || this.threshold == '' || this.amount == '' || this.startdate == '' || this.enddate ==
					'' || this.shopname == '') {
					uni.showToast({
						title: '请将内容填写完整',
						icon: 'none',
						duration: 1000
					})
				} else if (end < start) {
					uni.showToast({
						title: '时间区间错误',
						icon: 'none',
						duration: 1000
					})
				} else {
					global.$http.request({
						url: '/shopapi/activity/minusadd',
						data: {
							token: uni.getStorageSync('token'),
							start: this.startdate,
							end: this.enddate,
							name: this.name,
							threshold: this.threshold,
							reduce: this.amount,
							good_id: this.shopid
						}
					}).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							console.log(res.data.data);
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1000
							})
							setTimeout(function() {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2]; // 前一个页面
								uni.navigateBack({
									delta: 1,
									success: function() {
										beforePage.onLoad(); // 执行前一个页面的onLoad方法
									}
								})
							}, 1000)
						}
					})
				}

			},
		}
	}
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		width: 750rpx;
		margin: 0 auto;

		background-color: #f7f7f7;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.type {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 41rpx 19rpx;
				margin-top: 2rpx;
				background-color: #fff;

				.selects {
					font-size: 28rpx;
					font-weight: 400;
					color: #B3B3B3;
					display: flex;
				}

				.alltime {
					text {
						padding: 0 4rpx;
					}

					display: flex;
					align-items: center;

					.times {
						width: 220rpx;

						padding: 15rpx 11rpx;
						background: #FFFFFF;
						border: 2rpx solid #808080;
						border-radius: 22rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;
					}
				}

				.tit {
					font-size: 30rpx;
					font-weight: bold;
					color: #060606;
				}

				input {
					width: 60%;
					text-align: right;
				}

				.nums {
					display: flex;
					border: 1px solid #E2E2E2;
					border-radius: 5px 0px 0px 5px;

					.pad {
						padding: 20rpx;
						text-align: center;
					}

					.bord {
						border-left: 1px solid #E2E2E2;
						color: #FE0000;
						border-right: 1px solid #E2E2E2;
					}
				}
			}

			.confirm {
				width: 690rpx;
				background: #FE4E00;
				border-radius: 49px;
				position: absolute;
				bottom: 30rpx;
				left: 30rpx;
				text-align: center;
				padding: 34rpx 0;
				background: #FE4E00;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.shop {
				padding: 40rpx;
				display: flex;

				image {
					width: 180rpx;
					height: 180rpx;
				}

				.shop_r {
					padding-left: 26rpx;

					.shop_tit {
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}
				}

				.status {
					padding: 32rpx 0 17rpx 0;
					font-size: 24rpx;
					font-weight: 400;
					color: #FF0707;
				}

				.money {
					font-size: 24rpx;
					font-weight: 400;
					color: #010101;
				}
			}
		}
	}
</style>
